<template>
    <view class="handbook">
        <view class="cardBox">
            <u-tabs :list="listAll" :scrollable="false" @click="changeNational" keyName='label'
                :activeStyle="{color: '#3C9CFF',fontWeight: 'bold',fontSize: '26rpx',}"
                :inactiveStyle="{color: '#000',fontWeight: 'bold',fontSize: '26rpx',}"></u-tabs>
            <view class="listBox" v-if="serviceLevel==0||serviceLevel==1">
                <view class="typeBox">
                    <view class="typeItem" v-for="(item,index) in typeAllList" :key="index">
                        <view class="textBox" :class="serviceId==item.serviceType?'textBoxActive' :''" @click="serviceClick(item.serviceType)">
                            {{item.serviceType}}
                        </view>
                        <!-- <u-icon name="arrow-right"></u-icon> -->
                    </view>
                </view>
                <view class="itemBox">
                    <view v-if="guideAllList.length">
                        <view class="typeItem" v-for="(item,index) in guideAllList" :key="index"
                            @click="gotoPage('/personalCenter/handbookDetail?id='+item.id)">
                            <view class="textBox">
                                {{item.title}}
                            </view>
                            <image class="circleArrow" src="../../static/circleArrow.png"></image>
                        </view>
                    </view>
                    <view v-else>
                        <cc-empty />
                    </view>
                </view>
            </view>
            <view class="subscribeBox" v-else>
                <view class="subscribe">
                    <u--form labelPosition="top" :model="model1" ref="uForm">
                        <template>
                            <view class="current2">
                                <!-- @click="gotoPage('/pages/tabbar/showMoreGuide') " -->
                                <u-form-item label="预约事项" prop="serviceGuideName" borderBottom labelWidth="200" required
                                    @click="gotoPage('/pages/tabbar/showMoreGuide')">
                                    <u--input v-model="model1.serviceGuideName" disabledColor="#ffffff" disabled placeholder="请选择预约事项"
                                        border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="姓名" prop="name" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.name" disabledColor="#ffffff" placeholder="请输入姓名" border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="身份证号码" prop="idCard" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.idCard" disabledColor="#ffffff" placeholder="请输入身份证号码" border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="手机号码" prop="phone" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.phone" disabledColor="#ffffff" placeholder="请输入手机号码" border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="验证码" prop="code" borderBottom labelWidth="100" required>
                                    <u--input v-model="model1.code" :maxlength="6" border="none" placeholder="请输入验证码"></u--input>
                                    <div class="codeText" slot="right" @tap="getIdentityCode" type="primary" size="mini" :disabled="isVerify">
                                        {{isVerify?time+'秒后再次获取':'发送验证码'}}</div>
                                </u-form-item>
                                <u-form-item label="预约时间" prop="onlineBookingTime" borderBottom labelWidth="200" required @click="showTime=true">
                                    <u--input v-model="model1.onlineBookingTime" disabledColor="#ffffff" disabled placeholder="请输入预约时间"
                                        border="none"></u--input>
                                </u-form-item>
                            </view>
                        </template>
                    </u--form>
                </view>

                <view class="buttons" @tap="submit">提交</view>
            </view>
        </view>
        <u-datetime-picker :minDate=" Number(new Date())+Number(60*60*1000)" :show="showTime" v-model="value1" mode="datetime" @cancel='showTime=false'
            @confirm='confirmTime'></u-datetime-picker>
        <u-popup :show="showSuccessPopup" mode="center" @close="closePopup" @open="open" bgColor="transparent">
            <view class="successPopup">
                <view class="close">
                    <u-icon @click="closePopup" name="close-circle" color="#2a5eec" size="30"></u-icon>
                </view>
                <view class="imgBox">
                    <image class="circleArrow" src="../../static/success.png"></image>
                    <view>预约成功</view>
                    <view class="time">预约时间：{{model1.onlineBookingTime}}</view>
                </view>

                <view class="textBox">
                    <view class="item">
                        <view class="label">
                            <span>姓</span>
                            <span>名</span>
                            <span>：</span>
                        </view>{{model1.name}}
                    </view>
                    <view class="item">
                        <view class="label">
                            <span>身</span>
                            <span>份</span>
                            <span>证</span>
                            <span>号</span>
                            <span>：</span>
                        </view>
                        {{model1.idCard}}
                    </view>
                    <view class="item">
                        <view class="label">
                            <span>手</span>
                            <span>机</span>
                            <span>号</span>
                            <span>：</span>
                        </view>
                        {{model1.phone}}
                    </view>
                </view>
                <view class="tip">
                    注意：截图保存，现场出示
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import ccBottom from '../../components/cc-bottom/cc-bottom.vue'
import Validate from '../../utils/tools/validate.js'
export default {
    components: {
    },
    data() {
        return {
            listAll: [
                {
                    label: '个人办事',
                    value: '0'
                },
                {
                    label: '企业办事',
                    value: '1'
                },
                {
                    label: '网上预约',
                    value: '2'
                },
            ],
            showTypeBox: false,
            nationalItem: {},

            list1: [
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
            ],
            typeAllList: [],
            serviceId: '',
            serviceLevel: 0,
            guideAllList: [],
            highFrequency: '',
            model1: {
                serviceGuideName: '',
            },
            guideAllTypeList: [],
            showMatter: false,

            rules: {
                serviceGuideName: [{
                    required: true,
                    message: '请选择预约事项',
                    trigger: ['blur', 'change']
                }],
                name: [{
                    required: true,
                    message: '请输入姓名',
                    trigger: ['blur', 'change']
                }],
                phone: [{
                    type: "string",
                    required: true,
                    message: "请输入手机号码",
                    trigger: ["blur"],
                },
                {
                    validator: Validate.isMobile,
                },
                ],
                idCard: [{
                    type: "string",
                    required: true,
                    message: "请输入身份证号",
                    trigger: ["blur"],
                },
                {
                    validator: Validate.isIdNumber,
                },
                ],
                code: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: ['blur', 'change']
                }],
                onlineBookingTime: [{
                    required: true,
                    message: '请选择预约时间',
                    trigger: ['blur', 'change']
                }],
            },
            serviceGuideName: '',
            showTime: false,
            isVerify: false,
            time: 0,
            value1: null,
            showSuccessPopup: false
        }
    },
    onReady() {
    },
    onLoad(options) {
        this.highFrequency = options.highFrequency ? options.highFrequency : ''
    },
    onShow() {
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1]; // 当前页面
        this.model1.serviceGuideName = currentPage.data.serviceGuideName
        this.getData()
        // this.getAllDataList()
    },
    onShareAppMessage() {
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        // return {
        //     title: "分享标题",
        //     imageUrl: "",//分享封面
        //     //如果有参数的情况可以写path
        //     path: "/myPackageF/pages/brand/brandSecondvideoSrc=" + this.videoSrc + "&series=" + this.series//此处链接为要分享的页面链接
        // };
    },
    methods: {
        confirmTime(value) {
            console.log(value);

            var date = new Date();
            date.setTime(value.value);
            var month = date.getMonth() + 1;
            var hours = date.getHours();
            if (hours < 10)
                hours = "0" + hours;
            var minutes = date.getMinutes();
            if (minutes < 10)
                minutes = "0" + minutes;

            var seconds = date.getSeconds();
            if (seconds < 10)
                seconds = "0" + seconds;
            var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                " " + hours + ":" + minutes + ":" + seconds;
            this.model1.onlineBookingTime = time
            this.showTime = false
            // return time;
        },

        selectChange(e) {//返回选择的对象，如果输入框清空，返回null
            if (e) {
                this.mechId = e.id
            } else {
                this.mechId = ''
            }
        },
        inputChange(e) {//返回搜索结果集合,一般用不到
            console.log(e)
        },
        setMoney(item) {
            let number1 = item.standardMoney
            let number2 = item.fastMoney
            let number3 = item.groupMoney
            if (number1 <= number2 && number1 <= number3) {
                return number1;
            }
            if (number1 >= number2 && number2 <= number3) {
                return number2;
            }
            if (number3 <= number2 && number3 <= number1) {
                return number3;
            }
        },
        getData() {
            this.$asynApi.typeAllListApi({
                highFrequency: 0,
                serviceLevel: this.serviceLevel
            }).then(res => {
                this.typeAllList = res.data
                if (this.typeAllList && this.typeAllList.length) {
                    this.serviceId = this.typeAllList[0].serviceType
                    this.getList()
                }
                else {
                    this.guideAllList = []
                }
            })
        },
        getList() {
            this.$asynApi.guideAllListApi(
                {
                    serviceTypeId: this.serviceId,
                    serviceLevel: this.serviceLevel,
                    highFrequency: 0
                }
            ).then(res => {
                console.log(res);
                this.guideAllList = res.data
            })
        },

        // 跳转页面
        toPage(url, verifyToken) {
            if (verifyToken == 'verifyToken') {
                if (uni.getStorageSync('token')) {
                    uni.navigateTo({
                        url: url,
                    })
                }
                else {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    setTimeout(val => {
                        uni.clearStorage()
                        uni.navigateTo({
                            url: '/pages/login/login',
                        })
                    }, 2000)
                }
            }
        },

        gotoPage(url) {
            uni.navigateTo({
                url: url,
            })
        },
        gotoPageURl() {
            uni.navigateTo({
                url: "/pages/login/shop"
            })
        },
        // 点击国家
        changeNational(item) {
            // console.log()
            this.serviceLevel = item.value
            // this.getList()
            if (item.value == 2) {
                this.$nextTick(() => { //在弹窗加载出来只有 show 才会变成 true
                    this.$refs.uForm.setRules(this.rules)
                })

                if (!uni.getStorageSync('token')) {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    setTimeout(val => {
                        uni.clearStorage()
                        uni.navigateTo({
                            url: '/pages/login/login',
                        })
                    }, 2000)
                }
            }
            else {
                this.getData()
            }
        },
        serviceClick(id) {
            this.serviceId = id
            this.getList()
        },
        closePopup() {


            this.$refs.uForm.resetFields()
            this.model1 = {
                serviceGuideName: '',
            }
            this.isVerify = false;
            this.showSuccessPopup = false

        },
        submit() {
            let that = this
            this.$refs.uForm.validate().then(res => {
                let param = { ...this.model1 }
                this.disabledBtn = true
                uni.showLoading({
                    title: '提交中'
                })
                that.$asynApi.submitBooking(param).then(val => {
                    if (val.code == 200) {
                        that.showSuccessPopup = true
                        uni.hideLoading();
                        // uni.showToast({
                        //     title: '操作成功',
                        //     icon: 'success'
                        // });
                    }
                    else {

                        uni.hideLoading();
                        uni.showToast({
                            title: val.msg,
                            icon: 'none'
                        });
                    }
                })

            })
        },

        // 获取验证码
        async getIdentityCode() {
            let that = this
            if (this.isVerify) {
                return
            }
            this.$refs.uForm.validateField('phone', (res) => {
                if (res.length == 0) {
                    that.$asynApi.getVerifyCode(that.model1.phone).then(val => {
                        console.log(val);
                        if (val.code == 200) {
                            that.isVerify = true;
                            that.time = 60;
                            that.timer = setInterval(() => {
                                that.time--;
                                if (that.time <= 0) {
                                    clearInterval(that.timer);
                                    that.time = 60;
                                    that.isVerify = false;
                                }
                            }, 1000);
                        }
                    })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.status-bar {
    // height: var(--status-bar-height);
    width: 100%;
}

.handbook {
    background-color: #fff;
    .cardBox {
        width: calc(100% - 40rpx);
        margin: 0 auto;
        padding: 0rpx 20rpx 0rpx 20rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        color: #555;
        font-size: 32rpx;
        letter-spacing: 2rpx;
        position: relative;
        border-radius: 40rpx 40rpx 0 0;
        // background-color: #fff;
        overflow: hidden;
        // width: calc(100% - 40rpx);
        .listBox {
            display: flex;
            align-items: start;
            margin-top: 20rpx;
            .typeBox {
                width: 110rpx;
                height: calc(100vh - 108rpx);
                font-size: 30rpx;
                overflow-y: scroll;
                .typeItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 40rpx;
                    border-left: #4c87f3 8rpx solid;
                    .textBox {
                        padding-left: 12rpx;
                        font-weight: 600;
                        color: #000;
                    }
                    .textBoxActive {
                        color: #4c87f3;
                    }
                }
            }
            .itemBox {
                // padding: 0rpx 30rpx 0rpx 30rpx;
                // background-color: rgb(95, 160, 104);
                width: calc(100% - 100rpx);
                height: calc(100vh - 108rpx);
                font-size: 30rpx;
                overflow-y: scroll;
                border-left: 1rpx solid rgb(240, 240, 240);
                .typeItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 30rpx 20rpx 30rpx 20rpx;
                    // margin-bottom: 25rpx;
                    background-color: #fff;
                    border-bottom: 1rpx solid rgb(240, 240, 240);
                    .textBox {
                        border-left: #4c87f3 6rpx solid;
                        width: calc(100% - 76rpx);
                        padding-left: 20rpx;
                        font-size: 26rpx;
                        color: #000;
                        white-space: nowrap; /* 确保文本在一行内显示 */
                        overflow: hidden; /* 隐藏溢出的内容 */
                        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
                    }
                    .circleArrow {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }
            }
        }
        .subscribeBox {
            padding: 30rpx;
        }
    }
    .buttons {
        margin: 10rpx auto 0;
        width: 70vw;
        height: 90rpx;
        background: #2a5eec;
        border-radius: 8rpx;
        text-align: center;
        font-size: 32rpx;
        // font-weight: 600;
        color: #ffffff;
        line-height: 90rpx;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
    }
    .successPopup {
        width: 60vw;
        // height: 60vh;
        border-radius: 20rpx;
        background-color: #ffffff;
        padding: 30rpx 50rpx;
        border: #2a5eec 5rpx solid;
        position: relative;
        .close {
            position: absolute;
            top: 30rpx;
            right: 30rpx;
        }
        .imgBox {
            text-align: center;
            image {
                width: 30vw;
                height: 27vw;
            }
            .time {
                margin-top: 30rpx;
                color: #2a5eec;
                font-size: 26rpx;
            }
        }
        .textBox {
            font-size: 26rpx;
            padding-top: 80rpx;
            .item {
                display: flex;
            }
            .label {
                width: 140rpx;
                display: flex;
                justify-content: space-between;
            }
        }
        .tip {
            padding-top: 80rpx;
            color: #2a5eec;
            font-size: 22rpx;
            text-align: end;
        }
    }
}
/deep/ .u-swiper__wrapper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
}

/deep/ .u-swiper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    position: relative;
    background-color: transparent !important;
}
/deep/ .u-swiper__wrapper__item__wrapper__image {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    width: 100vw !important;
    image {
        width: 100vw !important;
        border-radius: 0rpx !important;
        height: calc(100vw * 1080 / 1920) !important;
    }
}
</style>